.alertleft-enter {
    opacity: 0;
    transform: translateX(-100%);
}

.alertleft-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all .3s;
}

.alertleft-exit {
    opacity: 0;
    transform: translateX(-100%);
    background-color: black;
    transition: all .3s;
}

.alertleft-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all .3s;
}

.alertright-enter {
    opacity: 0;
    transform: translateX(100%);
}

.alertright-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all .3s;
}

.alertright-exit {
    opacity: 1;
}

.alertright-exit-active {
    opacity: 0;
    transform: translateX(100%);
    transition: all .3s;
}

.alertmain-enter {
    opacity: 0.9;
}

.alertmain-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 300ms, transform 300ms;
}

.alertmain-exit {
    opacity: 1;
}

.alertmain-exit-active {
    opacity: 0.9;
    transform: scale(0.95);
    transition: opacity 300ms, transform 300ms;
}